<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>查询城市天气</title>
    <link rel="stylesheet" type="text/css" href="../css/main.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/ashes.min.css"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style> body {
        background: #f8f9fa;
    }

    .container {
        max-width: 600px;
        margin: auto;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    #weatherResult {
        background: #e9ecef;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
    }
    </style>
</head>
<body>
<section class="fixed-section">
    <canvas class="vh-bg"></canvas>
    <div class="vh_boy"></div>
</section>
<section class="page">
<div class="container mt-5">

    <h1 class="text-center">天气情况API接口</h1>
    <div class="form-group">
        <label for="city">城市名称：</label>
        <input type="text" id="city" class="form-control" placeholder="输入城市名称">
    </div>
    <button id="getWeather" class="btn btn-primary">获取天气</button>
    <div id="weatherResult" class="mt-4">
        <!-- 天气数据将展示在这里 -->
    </div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script >$(document).ready(function() {
    $('#getWeather').click(function() {
        const city = $('#city').val().trim();
        if (city === '') {
            alert('请输入城市名称');
            return;
        }


        const url = `https://api.vvhan.com/api/weather?city=${city}`;

        $.getJSON(url, function(data) {
            if (data.success) {
                const weatherData = `
                    <h3>${data.city}的天气情况</h3>
                    <p>日期: ${data.data.date}</p>
                    <p>星期: ${data.data.week}</p>
                    <p>天气: ${data.data.type}</p>
                    <p>温度: ${data.data.low} ~ ${data.data.high}</p>
                    <p>风向: ${data.data.fengxiang}</p>
                    <p>风力: ${data.data.fengli}</p>
                    <p>空气质量: ${data.air.aqi_name} (AQI: ${data.air.aqi})</p>
                    <p>提示: ${data.tip}</p>
                `;
                $('#weatherResult').html(weatherData);
            } else {
                $('#weatherResult').html('<p>无法获取天气信息，请稍后再试。</p>');
            }
        }).fail(function() {
            $('#weatherResult').html('<p>请求失败，请检查网络连接或稍后再试。</p>');
        });
    });
});

</script>
<svg class="vh-bolang" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28" preserveAspectRatio="none">
    <defs>
        <path id="vh-bolang-item"
              d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
    </defs>
    <g class="vh-bolang-main">
        <use xlink:href="#vh-bolang-item" x="50" y="0" fill="rgba(224,233,239,.5)"></use>
        <use xlink:href="#vh-bolang-item" x="50" y="3" fill="rgba(224,233,239,.5)"></use>
        <use xlink:href="#vh-bolang-item" x="50" y="6" fill="rgba(224,233,239,.5)"></use>
    </g>
</svg>
<section class="ξvh-toast"></section>
<script src="../js/main.min.js"></script>
<script src="../js/jquery.min.js"></script>

<!-- 子页面展示 -->
<script src="../js/page.js"></script>
<script src="../js/highlight.min.js"></script>
<script>
    $(() => hljs.highlightAll());
</script>

<!-- 统计代码 -->
<script charset="UTF-8" id="LA_COLLECT" src="https://sdk.51.la/js-sdk-pro.min.js"></script>
<script>
    LA.init({id: "JLvourAu9qIUtWYT", ck: "JLvourAu9qIUtWYT"});
</script>
</body>
</html>
